<template>
	<view class="container flex_C">
		<u-navbar class="navbar_wrap" leftIcon="" title="交易" :bgColor="'rgba(255, 255, 255,'+ navOpacity+')'" fixed placeholder></u-navbar>
		<view class="flex_1">
			<z-paging
				:fixed="false"
				ref="paging"
				v-model="dataList"
				@query="queryList"
				:auto-show-system-loading="true"
			>
				<view class="item_wrap" v-for="(item,index) in dataList" :key="item.id">
					<TacticsItem :tactics="item"/>
				</view> 
			</z-paging>
		</view>
	</view>
	
</template>

<script>
	import {listlApi} from '@/api/strategy.js';
	import TacticsItem from '@/components/tacticsItem/tacticsItem.vue'
	const navHeight = uni.upx2px(88) + uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {
			TacticsItem
		},
		data() {
			return {
				navHeight,
				navOpacity: 0,
				dataList:[],
				mescroll:null,
				page: 1
			};
		},
		onLoad() {},
		onUnload() {

		},
		methods:{
			queryList(pageNo, pageSize) {
				listlApi({page: pageNo, limit: pageSize }).then(res => {
					console.log(res)
					// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
					this.$refs.paging.complete(res.data.strategies);
				}).catch(res => {
					console.log(res)
					// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	/* #ifdef H5 */
	height: calc(100vh - 50px);
	/* #endif */
	/* #ifndef H5 */
	height: 100vh;
	/* #endif */
	.navbar_wrap{
		border-bottom: 1rpx solid #DBE0E6;
	}
	.scroll-diy{
		flex: 1;
		height: 0;
		.item_wrap{
			padding: 0 32rpx;
		}
	}
}
.item_wrap{
			padding: 0 32rpx;
		}
</style>